<template>
	<view class="f-page">
    <u-gap height="20"></u-gap>
    <u-grid :border="false" col="4">
      <u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="click">
        <u--image :src="listItem.img" width="36px" height="36px" />
        <u--text type="info" align="center" :size="15" :text="listItem.title"></u--text>
      </u-grid-item>
    </u-grid>
    <u-gap height="20"></u-gap>
    <u--text type="info" :size="20" text="热门分类"></u--text>
    <u-gap height="20"></u-gap>
    <u-grid :border="false" col="4">
      <u-grid-item v-for="(listItem,listIndex) in list2" :key="listIndex"  @click="clickList2">
        <u--image :src="listItem.img" shape="circle" width="50px" height="50px"/>
        <u-gap height="5"></u-gap>
        <u--text type="info" align="center" :size="15" :text="listItem.title"></u--text>
        <u-gap height="20"></u-gap>
      </u-grid-item>
    </u-grid>
    <u-gap height="20"></u-gap>
    <u--text type="info" :size="20" text="教学课本"></u--text>
    <u-gap height="20"></u-gap>
    <u-grid :border="false" col="3">
      <u-grid-item v-for="(listItem,listIndex) in list3" :key="listIndex" @click="clickList3">
        <u--image :src="listItem.img" width="60px" height="60px" />
        <u-gap height="5"></u-gap>
        <u--text type="info" align="center" :size="15" :text="listItem.title"></u--text>
        <u-gap height="20"></u-gap>
      </u-grid-item>
    </u-grid>
    <u-tabbar	:value="tabValue"	@change="changeTab"	:fixed="true"	:placeholder="true"	:safeAreaInsetBottom="true">
      <u-tabbar-item text="首页" icon="home" ></u-tabbar-item>
      <u-tabbar-item text="放映厅" icon="photo" ></u-tabbar-item>
      <u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item>
      <u-tabbar-item text="我的" icon="account" name="/pagework/poetry/user"></u-tabbar-item>
    </u-tabbar>

	</view>
</template>

<script>
	export default {
		data() {
			return {
        style: {
          fontSize: 15,
          titleStyle: {'font-size': '24rpx','color': '#606266'}
        },
			  list: [
          {title: '所有分类',url: '/pagework/poetry/cat',img: '/static/common/img/category-regular-36.png'},
          {title: '热门诗句',url: '/pagework/poetry/quote',img: '/static/common/img/hot-solid-36.png'},
          {title: '历朝诗人',url: '/pagework/poetry/author' ,img: '/static/common/img/bxs-group.svg'},
          {title: '搜索'    ,url: '/pagework/poetry/search' ,img: '/static/common/img/search-regular-36.png'}
        ],
        list2: [
          {title: '诗经全集',img: 'http://cdn.xcz.im/img/wenku/xuanji/shijing1.jpg',kindId: 1,cat: 12},
          {title: '唐诗三百首',img: 'http://cdn.xcz.im/img/wenku/xj-ts.jpg',kindId: 1,cat: 1},
          {title: '宋词三百首',img: 'http://cdn.xcz.im/img/wenku/xj-sc.jpg',kindId: 1,cat: 2},
          {title: '给孩子的诗',img: 'http://cdn.xcz.im/img/wenku/xj-hz.jpg',kindId: 1,cat: 3},
          {title: '离别' ,img: 'http://cdn.xcz.im/img/wenku/zt-lb.jpg',kindId: 2,cat: 38},
          {title: '思乡',img: 'http://cdn.xcz.im/img/wenku/zt-sx.jpg',kindId: 2,cat: 15},
          {title: '壮志',img: 'http://cdn.xcz.im/img/wenku/zt-zhuanz.jpg',kindId: 2,cat: 43},
          {title: '田园',img: 'http://cdn.xcz.im/img/wenku/zt-ty.jpg',kindId: 2,cat: 44},
          {title: '春' ,img: 'http://lcfile.xichuangzhu.com/ba82e15f4ee921ec4489.jpg',kindId: 3,cat: 24},
          {title: '夏',img: 'http://lcfile.xichuangzhu.com/577d511dde962643ded0.jpg',kindId: 3,cat: 25},
          {title: '秋',img: 'http://lcfile.xichuangzhu.com/54dc75a8273659ebc773.jpg',kindId: 3,cat: 26},
          {title: '冬',img: 'http://lcfile.xichuangzhu.com/6e86e931facbe54a02b1.jpg',kindId: 3,cat: 27}
        ],
        list3: [
          {title: '小学古诗词',img: 'http://lcfile.xichuangzhu.com/d1e8553de6590b93d17e.jpg',kindId: 3,cat: 88},
          {title: '初中古诗词',img: 'http://lcfile.xichuangzhu.com/4192e479f6c86a83af93.jpg',kindId: 3,cat: 90},
          {title: '高中古诗词',img: 'http://lcfile.xichuangzhu.com/57b09758b7f36d02abfc.jpg',kindId: 3,cat: 92},
          {title: '小学人教版' ,img: 'http://www.xcz.im/img/keben/all/x01.png',kindId: 3,cat: 420},
          {title: '初中人教版',img: 'http://www.xcz.im/img/keben/all/c08.png',kindId: 3,cat: 429},
          {title: '高中人教版',img: 'http://www.xcz.im/img/keben/all/g01.png',kindId: 3,cat: 438}
        ]
        ,tabValue: 0
			}
		},
		onBackPress() {
			if (this.$refs.fab.isShow) {
				this.$refs.fab.close()
				return true
			}
			return false
		},
		methods: {
      navTo(url,query) {
        this.$Router.push({ path: url, query: query})
        //  uni.$u.route(url, {kindId:item.kindId, cat: item1.cat,name: item1.name})
      },

			click(name) {
       let url =  this.list[name].url
        this.navTo(url)
      },
      clickList2(name) {
        this.navTo('/pagework/poetry/list',{kindId: this.list2[name].kindId, cat: this.list2[name].cat,name: this.list2[name].title})
      },
      clickList3(name) {
        this.navTo('/pagework/poetry/list',{kindId: this.list3[name].kindId, cat: this.list3[name].cat,name: this.list3[name].title})
      },
      changeTab(name) {
				this.tabValue = name
				console.log('change1', name);
        this.navTo(name,{})
			}
		}
	}
</script>

<style lang="scss">

  .head{
    background-color: $u-f-poetry-main-color;
  }
  .u-demo-block__content{
    flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
  }
  .f-page__tag-item {
		margin-right: 5px;
	}
</style>
